
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Letta综合审计仪表板</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <style>
        .metric-card { min-height: 120px; }
        .risk-high { border-left: 4px solid #dc3545; }
        .risk-medium { border-left: 4px solid #fd7e14; }
        .risk-low { border-left: 4px solid #20c997; }
        .event-row { border-bottom: 1px solid #eee; padding: 10px 0; }
        .conversation-item { border-left: 3px solid #007bff; padding: 10px; margin: 5px 0; background: #f8f9fa; }
    </style>
</head>
<body>
    <div class="container-fluid">
        <nav class="navbar navbar-dark bg-dark mb-4">
            <div class="container-fluid">
                <span class="navbar-brand mb-0 h1">🛡️ Letta综合审计仪表板</span>
                <span class="navbar-text" id="lastUpdate">最后更新: --</span>
            </div>
        </nav>

        <!-- 总览统计 -->
        <div class="row mb-4">
            <div class="col-md-6">
                <h4>🖥️ 服务器审计统计</h4>
                <div class="row" id="serverStats">
                    <!-- 服务器统计卡片 -->
                </div>
            </div>
            <div class="col-md-6">
                <h4>💬 对话审计统计</h4>
                <div class="row" id="conversationStats">
                    <!-- 对话统计卡片 -->
                </div>
            </div>
        </div>

        <!-- 图表区域 -->
        <div class="row mb-4">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">📊 风险分布对比</div>
                    <div class="card-body">
                        <div id="riskComparisonChart" style="height: 400px;"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">📈 对话风险时间线</div>
                    <div class="card-body">
                        <div id="conversationTimelineChart" style="height: 400px;"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 事件列表 -->
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">🔍 最近服务器事件</div>
                    <div class="card-body">
                        <div id="serverEvents" style="max-height: 400px; overflow-y: auto;">
                            <!-- 服务器事件列表 -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">💭 最近对话记录</div>
                    <div class="card-body">
                        <div id="conversations" style="max-height: 400px; overflow-y: auto;">
                            <!-- 对话记录列表 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 更新服务器统计
        function updateServerStats() {
            fetch('/api/server_stats')
                .then(response => response.json())
                .then(data => {
                    const container = document.getElementById('serverStats');
                    container.innerHTML = `
                        <div class="col-md-4 mb-2">
                            <div class="card metric-card">
                                <div class="card-body text-center">
                                    <h5 class="card-title text-primary">${data.total_events || 0}</h5>
                                    <p class="card-text">总事件数</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-2">
                            <div class="card metric-card risk-high">
                                <div class="card-body text-center">
                                    <h5 class="card-title text-danger">${data.high_risk_events || 0}</h5>
                                    <p class="card-text">高风险事件</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-2">
                            <div class="card metric-card">
                                <div class="card-body text-center">
                                    <h5 class="card-title text-info">${data.financial_events || 0}</h5>
                                    <p class="card-text">金融事件</p>
                                </div>
                            </div>
                        </div>
                    `;
                });
        }

        // 更新对话统计
        function updateConversationStats() {
            fetch('/api/conversation_stats')
                .then(response => response.json())
                .then(data => {
                    const container = document.getElementById('conversationStats');
                    container.innerHTML = `
                        <div class="col-md-4 mb-2">
                            <div class="card metric-card">
                                <div class="card-body text-center">
                                    <h5 class="card-title text-success">${data.total_conversations || 0}</h5>
                                    <p class="card-text">总对话数</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-2">
                            <div class="card metric-card risk-high">
                                <div class="card-body text-center">
                                    <h5 class="card-title text-danger">${data.high_risk || 0}</h5>
                                    <p class="card-text">高风险对话</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-2">
                            <div class="card metric-card">
                                <div class="card-body text-center">
                                    <h5 class="card-title text-warning">${data.avg_sensitivity || 0}</h5>
                                    <p class="card-text">平均敏感度</p>
                                </div>
                            </div>
                        </div>
                    `;
                });
        }

        // 更新图表
        function updateCharts() {
            // 风险对比图表
            fetch('/api/charts/risk_comparison')
                .then(response => response.json())
                .then(data => {
                    if (data.chart) {
                        Plotly.newPlot('riskComparisonChart', JSON.parse(data.chart).data, JSON.parse(data.chart).layout);
                    }
                });

            // 对话时间线图表
            fetch('/api/charts/conversation_timeline')
                .then(response => response.json())
                .then(data => {
                    if (data.chart) {
                        Plotly.newPlot('conversationTimelineChart', JSON.parse(data.chart).data, JSON.parse(data.chart).layout);
                    }
                });
        }

        // 更新事件列表
        function updateEvents() {
            // 服务器事件
            fetch('/api/server_events?limit=20')
                .then(response => response.json())
                .then(data => {
                    const container = document.getElementById('serverEvents');
                    if (Array.isArray(data)) {
                        container.innerHTML = data.map(event => `
                            <div class="event-row">
                                <strong>${event.event_type}</strong> 
                                <span class="badge bg-${event.level === 'ERROR' ? 'danger' : event.level === 'WARNING' ? 'warning' : 'info'}">${event.level}</span>
                                <br>
                                <small class="text-muted">${new Date(event.timestamp).toLocaleString()}</small>
                                <br>
                                <small>${event.action}: ${event.details}</small>
                            </div>
                        `).join('');
                    }
                });

            // 对话记录
            fetch('/api/conversations?limit=20')
                .then(response => response.json())
                .then(data => {
                    const container = document.getElementById('conversations');
                    if (Array.isArray(data)) {
                        container.innerHTML = data.map(conv => `
                            <div class="conversation-item">
                                <div class="d-flex justify-content-between">
                                    <strong>${conv.user_id}</strong>
                                    <span class="badge bg-${conv.risk_level === 'HIGH' ? 'danger' : conv.risk_level === 'MEDIUM' ? 'warning' : 'success'}">${conv.risk_level}</span>
                                </div>
                                <div class="mt-2">
                                    <div><strong>Q:</strong> ${conv.user_question}</div>
                                    <div class="mt-1"><strong>A:</strong> ${conv.llm_response}</div>
                                </div>
                                <small class="text-muted">${new Date(conv.timestamp).toLocaleString()}</small>
                            </div>
                        `).join('');
                    }
                });
        }

        // 初始化和定时刷新
        function updateAll() {
            updateServerStats();
            updateConversationStats();
            updateCharts();
            updateEvents();
            document.getElementById('lastUpdate').textContent = `最后更新: ${new Date().toLocaleTimeString()}`;
        }

        // 页面加载时更新
        updateAll();

        // 每30秒自动刷新
        setInterval(updateAll, 30000);
    </script>
</body>
</html>
        